<style>
.product {
    background: #efefef;
}
.goods-container {
    margin-top: 48px;
    padding: 0 6px;
}
.split-line {
    height: 6px;
    background: #efefef;
}
.goods-item-wrap {
    float: left;
    width: 50%;
}
.goods-item-padding {
    padding: 0 3px;
}
.goods-item {
    background: #efefef;
}
#app .app-header {
    position: fixed;
    width: 100%;
    top: 0;
    background: #fff;
    z-index: 2;
}
.icon-category {
    font-size: 20px;
    font-weight: bold;
    color: #666;
}

</style>
<template>
    <div id="app">
        <app-header class="app-header">
            <div>商品</div>
            <div slot="headerRightBtn">
                <span class="icon-category" @click="goToCategoryPage()"></span>
            </div>
        </app-header>
        <div class="goods-container clearfix">
            <div class="goods-item-wrap" v-for="(goodsItem, index) in goodsItems" :key="index">
                <div class="goods-item-padding">
                    <goods-item class="goods-item" @goodsItemDetail="openCart" @click="clickGoodsItemHandler" :goodsItem="goodsItem"></goods-item>
                </div>
            </div>
        </div>
        <product-picker v-if="productPickerModal" v-model="productPickerModal" :goods-item-detail="goodsItemDetail"></product-picker>
        <floating-cart-icon></floating-cart-icon>
    </div>
</template>

<script>
import utils from '@utils'
import { listProduct } from './api'
export default {
    name: 'app',
    mixins: [ utils.MixinBase ],
    data() {
        return {
            goodsItems: [],
            loadedDone: false,
            loading: false,
            hasLoading: false,
            productPickerModal: false,
            currentPage: 0,
            pageSize: 10,
            totalPages: 1,
            categoryId: utils.getQueryObject().id,
        }
    },
    mounted() {
        this.wechatInit().then(()=> {
            this.init();
            this.wechatConfigInit().then(() => {
                var shareOptions = {
                    shareTitle: "坚冰商务",
                    shareDesc: "亲！还在等什么，快来看看！",
                    shareUrl: utils.createAuthLink("index.html"),
                    sharePic: ''
                }

                utils.shareHandler({
                    type: 'timeLine',
                    ...shareOptions
                })

                utils.shareHandler({
                    type: 'appMessage',
                    ...shareOptions
                })
            })
        }, ()=> {
            this.init();
        });
        window.addEventListener("scroll", () => {
            var scrollTopAndOffsetHeight = (document.documentElement.scrollTop||document.body.scrollTop)+document.documentElement.clientHeight;
            var scrollHeight = document.documentElement.scrollHeight;
            if(!this.loadedDone&&(scrollTopAndOffsetHeight+50>scrollHeight)) {
                this.loadData();
            }
        }, false);
    },
    methods: {
        init() {
            var categorySessionId = "category"+(this.categoryId||'');
            var categorySessionJson = JSON.parse(sessionStorage.getItem(categorySessionId));
            if(categorySessionJson) {
                this.currentPage = categorySessionJson.currentPage;
                this.totalPages = categorySessionJson.totalPages;
                this.dataCount = categorySessionJson.dataCount;
                this.goodsItems = categorySessionJson.goodsItems;
                this.loadedDone = categorySessionJson.loadedDone;
                this.hasLoading = true;
            }
            if(!this.loadedDone) {
                this.loadData();
            } 
        },
        loadData() {
            if(!this.loading) {
                this.hasLoading = false;
                this.$indicator.open({
                    spinnerType: 'fading-circle',
                    text: '加载中...'
                });
                this.loading = true;
                var param = {
                    currentPage: this.currentPage,
                    pageSize: this.pageSize
                }
                if(this.categoryId) {
                    param.categoryId = this.categoryId;
                }
                listProduct(param).then((data)=>{
                    this.$indicator.close();
                    this.loading = false;
                    this.hasLoading = true;

                    this.currentPage = ++data.currentPage;
                    if(data.currentPage>=data.totalPages) {
                        this.loadedDone = true;
                    }
                    this.totalPages = data.totalPages;
                    this.goodsItems = this.goodsItems.concat(data.list);
                    
                    var categoryJSon = {
                        currentPage: this.currentPage,
                        totalPages: this.totalPages,
                        dataCount: data.dataCount,
                        goodsItems: this.goodsItems,
                        loadedDone: this.loadedDone
                    }

                    sessionStorage.setItem("category"+(param.categoryId||''), JSON.stringify(categoryJSon));
                    
                }, ()=> {
                    this.$indicator.close();
                })
            }
        },
        clickGoodsItemHandler(goodsItem) {
            utils.goToPage("product_detail.html?id="+goodsItem.id);
        },
        goToCategoryPage() {
            utils.goToPage("category.html");
        },
        openCart(goodsItem) {
            this.goodsItemDetail = goodsItem;
            this.productPickerModal = true;
        }
    }
}
</script>
